<template>
  <div class="app-container record-container">
    <div class="filter-container">
      <div class="fl">
        <el-input placeholder="媒体MAC" clearable style="width: 120px;" class="filter-item" />
        <el-input placeholder="SearchKey" clearable style="width: 120px;" class="filter-item" />
        <el-input placeholder="地区(市)" clearable style="width: 90px;" class="filter-item" />
        <el-select v-model="listQuery.playStatus" placeholder="状态" clearable class="filter-item" style="width: 80px">
          <el-option  key="0" label="成功" value="0"/>
          <el-option  key="1" label="失败" value="1"/>
        </el-select>
        <el-input placeholder="媒体类型" clearable v-model="listQuery.deviceModel" style="width: 90px;" class="filter-item" @keyup.enter.native="handleFilter"/>
      </div>
      <div class="fl" style="margin:0 10px;">
        <div v-show="diyTime">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="selectedTime"
            type="datetimerange"
            size="small"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeChange"
          style="height: 36px;width: 350px; ">
          </el-date-picker>
        </div>
      </div>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
    </div>

    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="一致性 Consistency" name="1">
            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
          </el-collapse-item>
          <el-collapse-item title="反馈 Feedback" name="2">
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
          </el-collapse-item>
          <el-collapse-item title="效率 Efficiency" name="3">
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
          </el-collapse-item>
          <el-collapse-item title="可控 Controllability" name="4">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="消息中心">消息中心</el-tab-pane>
      <el-tab-pane label="角色管理">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import {formatTime} from "@/utils/time";
  import {getRecodList} from "@/api/advertisement";
  import Pagination from '@/components/Pagination'

  export default {
    components: {
      Pagination
    },
    data() {
      return {
        diyTime: true,
        startTime: new Date(new Date().toLocaleDateString()).getTime(),
        endTime: new Date().getTime(),
        tableKey: 0,
        total: 0,
        list: null,
        selectedTime: [],
        listLoading: false,
        listLoadingPanel: false,
        listQuery: {
          pageIndex: 1,
          pageSize: 20,
          startTime: undefined,
          endTime: undefined,
          mac: undefined,
          searchKey:undefined,
          city: undefined,
          playStatus:undefined,
          deviceModel:undefined,
        },
        downloadLoading: false,
        activeName: '1'
      }
    },
    methods: {
      timeChange(val) {
        this.startTime = new Date(val[0]).getTime()
        this.endTime = new Date(val[1]).getTime()
        this.queryTable()
      },
      queryTable() {
        // this.selectedTime = [this.startTime, this.endTime]
        // this.listLoading = false
        // this.listQuery.startTime = this.startTime
        // this.listQuery.endTime = this.endTime
        // getRecodList(this.listQuery).then(response => {
        //   this.list = response.data.data.data
        //   this.listLoading = false;
        //   console.log(this.total)
        //   this.total = response.data.data.rowCount
        // })
      },
      handleFilter() {
        this.listQuery.pageIndex = 1
        this.queryTable()
      },
      handleDownload() {
        this.downloadLoading = true
        {
          let queryTime = {"startTime": new Date(this.startTime).getTime(), "endTime": new Date(this.endTime).getTime()}
          downLoadTable(queryTime).then(response => {
            this.downloadLoading = false
          })
        }
      },
    },
    computed: {
      standardStartTime: function () {
        return formatTime(new Date(this.startTime), 'yyyy-MM-dd')
      },
      standardEndTime: function () {
        return formatTime(new Date(this.endTime), 'yyyy-MM-dd')
      }
    },
    mounted() {
    },
    created() {
      this.queryTable()
    },
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .record-container {
    margin: 30px;

    .document-btn {
      float: left;
      margin-left: 50px;
      display: block;
      cursor: pointer;
      background: black;
      color: white;
      height: 60px;
      width: 200px;
      line-height: 60px;
      font-size: 20px;
      text-align: center;
    }
  }
  .filter-container：{text-align: center}
</style>
